<template>
  <view style="height: 100vh">
    <u-cell :border="false">
      <template #title>
        <u-text text="kingon-banner" color="var(--kui-color-theme)" bold></u-text>
      </template>
    </u-cell>
    <kingon-banner :height="200" />
    <view class="p-2">
      <!-- <u-notice-bar
        class="notice-bar"
        bg-color="#ff00001c"
        color="red"
        icon="bell-fill"
        :text="'查看设备告警信息'"
      ></u-notice-bar> -->
    </view>

    <u-cell title="示例菜单" :border="false">
      <template #title>
        <u-text text="示例菜单" color="var(--kui-color-theme)" bold></u-text>
      </template>
    </u-cell>

    <scroll-x-menu barBackground="white" barColor="var(--kui-color-theme)" :dataSource="commonMenu" :barWidth="160"
      :colList="7" :column="5" :barShow="true" :iconPrePath="menuBaseUrl" iconSize="80rpx" @onItemClick="toPage">
    </scroll-x-menu>

    <u-cell :border="false">
      <template #title>
        <u-text text="kingon-notice" color="var(--kui-color-theme)" bold></u-text>
      </template>
      <template #label>
        <u-text text="暂无组件" type="info" align="center"></u-text>
      </template>
    </u-cell>

    <u-line margin="0.5em 0" />
    <u-cell>
      <template #title>
        <u-text text="示例功能" color="var(--kui-color-theme)" bold></u-text>
      </template>
    </u-cell>
    <view class="p-10rpx">
      <u-text text="1.Tabbar 交互( 含 globalHomePage)" type="info" bold margin="10rpx"></u-text>
      <view class="flex w-full justify-evenly">
        <u-button color="var(--kui-color-theme)" @click="addMsg" size="small" custom-style="margin-right: 20rpx;">给 tabbar 传值</u-button>
        <u-button color="var(--kui-color-theme)" @click="toHome" size="small">切换 tab 到首页</u-button>
        
      </view>
    </view>
    <u-line margin="0.5em 0" />

    <view style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center">
      <text class="" :style="{
        fontWeight: 'bold',
        color: 'var(--kui-color-theme)',
      }">
        Func Page
      </text>
    </view>
  </view>
</template>
<script setup>
import { reactive, onMounted } from "vue";

const menuBaseUrl = "/static/images/home/icon/";
const commonMenu = reactive([
  {
    icon: "icon4.png",
    label: "ListPage",
    url: "/pages/subExample/listPage/listPage",
  },
  {
    icon: "icon1.png",
    label: "EasyForm",
    url: "/pages/subExample/easyForm/easyForm",
  },
  {
    icon: "icon2.png",
    label: "富文本",
    url: "/pages/subExample/richText",
  },
  {
    code: "gridWork",
    icon: "icon3.png",
    label: "网格管理",
  },
  {
    code: "gridWork",
    icon: "icon7.png",
    label: "网格管理",
  },
  {
    code: "gridWork",
    icon: "icon6.png",
    label: "网格管理",
  },
  {
    code: "gridWork",
    icon: "icon5.png",
    label: "网格管理",
  },
  {
    code: "gridWork",
    icon: "icon4.png",
    label: "网格管理",
  },
  {
    code: "gridWorkE",
    icon: "icon9.png",
    label: "网格管理E",
  },
  {
    code: "gridWorkF",
    icon: "icon10.png",
    label: "网格管理F",
  },
  {
    code: "gridWorkF",
    icon: "icon10.png",
    label: "网格管理FG",
  },
]);

/** 支持只传路径，默认会补充参数 */
const toPage = (item) => {
  if (typeof item == "string") {
    return uni.navigateTo({ url: item });
  }
  if (item.url) {
    return uni.navigateTo({ url: item.url });
  }
  if (item.subSysConfig && item.subSysConfig.path) {
    // 存储全局变量
    this.$globalData.pageChannel = item.subSysConfig;
    return uni.navigateTo({ url: `${item.path}` });
  }
  if (item.preToPage) {
    if (item.preToPage instanceof Function) {
      item.preToPage(item);
    } else {
      this[item.preToPage](item);
    }
  } else {
    console.log("toPage ->  x", item.path);
    // this.TooL.Core.openReLaunch(item.path);
    uni.navigateTo({
      url: item.path,
    });
  }

}

onMounted(() => {

});

/** --------- TABBAR 交互  START -------------------------- */
// test 给tabbar传值
let msgCount = 0;
const addMsg = () => {
  ++msgCount;
  uni.$emit("tabbar:setMsgCount", { name: "universalMsgTabbar", count: msgCount })
}

// tabbar 跳转到首页
const toHome = () => {
  uni.$emit("tabbar:changeTab", { name: "universalHomeTabbar"})
}


// 设置当前组件 （func.vue）的 “页面生命周期hook ”, 由 globalHomePage/index 进行代理
const onShowHook = () => {}
const onHideHook = () => {}
const onUnloadHook = () => {}
const onPullDownRefreshHook = () => {}
const onReachBottomHook = () => {}
// 切换到该tab默认会调用的方法
const loadListFunc = () => {}

defineExpose({loadListFunc, onShowHook, onHideHook, onUnloadHook, onPullDownRefreshHook, onReachBottomHook})
/** --------- TABBAR 交互  END -------------------------- */

</script>
<style lang="scss"></style>
